<template>
  <a-tabs size="small" :activeKey="activeKey">
    <!-- 流程属性 -->
    <a-tab-pane :key="ActiveTypeEnum.CANVAS" v-if="activeKey === ActiveTypeEnum.CANVAS">
      <template #tab>
        <span>
          <component :is="'ClusterOutlined'" />
          流程属性
        </span>
      </template>
      <a-form layout="vertical">
        <a-form-item label="流程id">
          <a-input :value="flowData.attr.id" disabled />
        </a-form-item>
      </a-form>
    </a-tab-pane>

    <!-- 节点属性 -->
    <a-tab-pane :key="ActiveTypeEnum.NODE" v-if="activeKey === ActiveTypeEnum.NODE">
      <template #tab>
        <span>
          <component :is="'ProfileOutlined'" />
          节点属性
        </span>
      </template>
      <a-form layout="vertical">
        <a-form-item label="类型">
          <a-tag color="purple">{{ currentSelect.type }}</a-tag>
        </a-form-item>
        <a-form-item label="id">
          <a-input :value="currentSelect.id" disabled />
        </a-form-item>
        <a-form-item label="名称" v-if="isAllowChange(currentSelect.type as NodesType)">
          <a-input
            placeholder="请输入节点名称"
            :value="(currentSelect as INode)?.nodeName"
            @change="nodeNameChange"
          />
        </a-form-item>

        <a-form-item label="图标">
          <a-input
            placeholder="请输入Ant图标"
            :value="(currentSelect as INode)?.icon"
            @change="nodeIconChange"
          >
          </a-input>
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item
              label="背景颜色"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <div @click="handleColorPicker">
                <color-picker           
                  @pureColorChange="color => nodeColorChange(color, 'bgColor')" 
                  v-model:pureColor="(currentSelect as INode).bgColor" 
                />
              </div>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item
              label="字体颜色"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <div @click="handleColorPicker">
                <color-picker           
                  @pureColorChange="color => nodeColorChange(color, 'fontColor')" 
                  v-model:pureColor="(currentSelect as INode).fontColor" 
                />
              </div>
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 只有当节点支持文本列表时才显示 -->
        <a-form-item label="文本列表" v-if="hasTextList">
          <div v-for="(item, index) in localTextList" :key="index" class="text-list-item">
            <a-input
              :value="item.name"
              @change="e => updateTextItemName(index, e.target.value)"
              placeholder="请输入名称"
              style="width: 45%; margin-right: 4px;"
            />
            <a-input
              :value="item.time"
              @change="e => updateTextItemTime(index, e.target.value)"
              placeholder="请输入时间"
              style="width: 45%; margin-right: 4px;"
            />
            <a-button type="link" danger @click="removeTextItem(index)">删除</a-button>
          </div>
          <a-button type="dashed" block @click="addTextItem">+ 添加条目</a-button>
        </a-form-item>
      </a-form>
    </a-tab-pane>

    <!-- 连线属性 -->
    <a-tab-pane :key="ActiveTypeEnum.CONNECTION" v-if="activeKey === ActiveTypeEnum.CONNECTION">
      <template #tab>
        <span>
          <component :is="'BranchesOutlined'" />
          连线属性
        </span>
      </template>
      <a-form layout="vertical">
        <a-form-item label="id">
          <a-input :value="currentSelect.id" disabled />
        </a-form-item>
        <a-form-item label="源节点">
          <a-input :value="(currentSelect as ILink)?.sourceId" disabled />
        </a-form-item>
        <a-form-item label="目标节点">
          <a-input :value="(currentSelect as ILink)?.targetId" disabled />
        </a-form-item>
        <a-form-item label="文本">
          <a-input :value="(currentSelect as ILink)?.label" @change="linkLabelChange" />
        </a-form-item>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import { ChangeEvent } from 'ant-design-vue/lib/_util/EventInterface';
import { ref, watch, unref, PropType, reactive, nextTick, computed, defineComponent } from 'vue';
import { INode, ILink, NodesType } from '../../type/index';
import { CommonNodeTypeEnum, ActiveTypeEnum } from '../../type/enums';
import { ColorPicker } from 'vue3-colorpicker';
import { useFlowAttr } from '../script/flowAttr';

export default defineComponent({
  components: {
    ColorPicker
  },
  props: {
    plumb: {
      type: Object,
      default: () => ({}),
    },
    flowData: {
      type: Object,
      default: () => ({}),
    },
    select: {
      type: Object as PropType<INode | ILink>,
      default: () => ({}),
    },
  },
  emits: ['update:select'],
  setup(props, { emit }) {
    return useFlowAttr(props, emit);
  }
});
</script>